<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>视频播放器</title>
  <link rel="stylesheet" href="../assets/css/base.css">
  <link rel="stylesheet" href="./assets/css/index.css">
  <script>
  function getTime(time) {
    var second = time,
        minute = 0,
        hour = 0,
        day = 0;
    minute = parseInt(second / 60); //算出一共有多少分钟
    second %= 60; //算出有多少秒
    if (minute > 60) {
        //如果分钟大于60，计算出小时和分钟
        hour = parseInt(minute / 60);
        minute %= 60; //算出有多分钟
    };
    if (hour > 24) {
        //如果小时大于24，计算出天和小时
        day = parseInt(hour / 24);
        hour %= 24; //算出有多分钟
    };
    hour = hour < 10 ? "0" + hour.toFixed(0) : hour.toFixed(0);
    minute = minute < 10 ? "0" + minute.toFixed(0) : minute.toFixed(0);
    second = second < 10 ? "0" + second.toFixed(0) : second.toFixed(0);
    return [hour, minute, second].join(':');
  }
  window.onload = function() {
        var oVideo = document.querySelector('.h5-play-video');
        var oPlay = document.querySelector('.h5-play-play');
        var timeAll = document.querySelector('.h5-play-time-all');
        var loaded = document.querySelector('.h5-play-progress-loaded');
        var range = document.querySelector('.h5-play-progress-range');
        var timeCur = document.querySelector('.h5-play-time-cur');

        oVideo.addEventListener('canplay', function() {
            var that = this;
            var s = function() {
                var timeRange = that.buffered;
                console.log(that.buffered.start(0), that.buffered.end(0));
                if (that.buffered.length == 1) {
                    loaded.style.width = that.buffered.end(0)/that.duration * 100 + '%';
                }
                setTimeout(s, 1000);
            };
            s();
            timeAll.innerHTML = getTime(this.duration);
        }, false);

        oVideo.addEventListener('progress', function() {
            var timeRange = this.buffered;
            console.log(timeRange.length);
            if (timeRange.length == 1) {
                console.log(timeRange.start(0), timeRange.end(0));
                loaded.style.width = timeRange.end(0)/this.duration * 100 + '%';
            }
        }, false);
        
        
        oPlay.addEventListener('click', function() {
            oVideo.play();
            var s = function() {
                var timeRange = oVideo.played;
                if (timeRange.length == 1) {
                    range.style.width = timeRange.end(0)/oVideo.duration * 100 + '%';
                    timeCur.innerHTML = getTime(timeRange.end(0));
                }
                setTimeout(s, 1000);
            };
            s();
        }, false);
    }
  </script>
</head>
<body>
    <div class="h5-play">
        <div class="h5-play-content">
            <video class="h5-play-video" style="width: 100%;height: 100%;object-fit: fill">
                <source src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" type="video/mp4" />
            </video>
        </div>
        <div class="h5-play-controls">
            <div class="h5-play-progress">
                <div class="h5-play-progress-loaded"></div>
                <div class="h5-play-progress-range"></div>
            </div>
            <div class="h5-play-tools">
                <div class="h5-play-tools-left">
                    <i class="icon h5-play-play"></i>
                    <div class="h5-play-time">
                        <span class="h5-play-time-cur">17:33</span>
                        <span class="h5-play-time-decollator">/</span>
                        <span class="h5-play-time-all">43:33</span>
                    </div>
                </div>
                <div class="h5-play-tools-right">

                </div>
            </div>
        </div>
    </div>
</body>
</html>